<!-- 회원가입 뷰 
	아이디, 비밀번호, 비밀번호 확인, 이름, 이메일, 휴대폰 번호, 학교, 학점, 개인별 어학정적을 입력받음
	아이디, 비밀번호, 비밀번호 확인, 이름, 이메일, 휴대폰 번호는 입력하지 않을 경우 script에서 확인 하고
	입력하라는 message를 띄운다.
	비밀번호와 비밀번호 확인에 입력한 값은 같아야한다.
	아이디 중복체크를 하여야 한다.
	* 수정사항
		14.05.21
			- 아이디 중복체크 윈도우를 새로 띄울때 joinus 페이지에서 입력한 아이디가 중복체크 윈도우로 넘어
			   가지 않는 점 해결
			- joinus.js 에서 submit이 안되는 현상
			- checkIdDuplication()과 checkJoinInput() 함수를 questudy.js 에서 js/joinus/joinus.js 로 옮긴다.
		14.05.27
			- ID 중복체크 후에 다시 아이디를 입력했을경우도 중복체크	
	* 수정할 사항
		- ID를 한글로 입력했을 경우
		- 개인별 어학성적을 입력받을 때 현재 임의 어학분야들을 설정했는데, DB에서 설정한 어학성적에 관한 카테
		  고리들을 서블릿에서 request 객체에 받아와야한다.
-->

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ page import="java.util.*" %>
<%@ page import="model.*" %>
<!DOCTYPE HTML>
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0 maximum-scale=1.0, user-scalable=no" />
	<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
	<link rel="Stylesheet" href="css/bootstrap-responsive.min.css" />
	<link rel="stylesheet" href="css/questudy.css" />
	
	<script src="http://code.jquery.com/jquery.js"></script>
	<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
	<script src="js/joinus/joinus.js"></script>
<title>Welcome to Questudy</title>
</head>
<%
	ArrayList<Language> langList = (ArrayList<Language>)request.getAttribute("langList");
%>
<body>
	<jsp:include page="nav/nav_main.jsp" />
	<form id="joinForm" name="joinForm" method="post" action="JoinAction.Member">
		<div class="container firstDiv">
			<div class="col-md-6 col-md-offset-3">
				<p class="lead text-center">
					QueStduy에 오신 여러분을 환영합니다. 노력한 만큼의 성과를 얻어가시길 진심으로 염원합니다.
				</p>
			</div>
			<div class="col-md-6 col-md-offset-3">
				<div class="input-group">
					<span class="input-group-addon">*ID</span>
					<input type="text" id="userId" name="memid" class="form-control" placeholder="ID" onchange="changeIdDupState()">
					<span class="input-group-btn">
						<button class="btn btn-default" type="button" onclick="checkIdDuplication()">중복확인</button>
					</span>
				</div>
				<div class="input-group">
					<span class="input-group-addon">*비밀번호</span>
					<input type="password" id="password" name="passwd" class="form-control" placeholder="Password">
				</div>
				<div class="input-group">
					<span class="input-group-addon">*비밀번호 확인</span>
					<input type="password" id="password_confirm" name="password_confirm"class="form-control" placeholder="Password confirm">
				</div>
				<div class="input-group">
					<span class="input-group-addon">*이름</span>
					<input type="text" id="userName" name="name" class="form-control" placeholder="이름">
				</div>
				<div class="input-group">
					<span class="input-group-addon">*E-mail</span>
					<input type="text" id="email" name="email" class="form-control" placeholder="E-mail">
				</div>
				<div class="input-group" style=" width: 150px; float: left; ">
					<span class="input-group-addon">휴대폰번호</span>
					<div class="input-group-btn">
			        	<button type="button" class="btn btn-default dropdown-toggle" id="fstPNum" data-toggle="dropdown">010<span class="caret"></span></button>
				        <ul class="dropdown-menu">
				          <li onclick="changeNum(this)">010</li>
				          <li onclick="changeNum(this)">011</li>
				          <li onclick="changeNum(this)">017</li>
				          <li onclick="changeNum(this)">018</li>
				        </ul>
				    </div><!-- /btn-group -->
   				</div>
				<div class="input-group" style=" float: left; width: 150px; ">
					<span class="input-group-addon">-</span>
					<input type="text" id="midNum" class="form-control" onkeyup="phoneNum(this)">
				</div>
				<div class="input-group" style=" width: 150px; ">
					<span class="input-group-addon">-</span>
					<input type="text" id="lastNum" class="form-control" onkeyup="phoneNum(this)">
					<input type="hidden" id="pNum" name="pNum" class="form-control" placeholder="" value="010">
				</div>
				<div class="input-group">
					<span class="input-group-addon">학교</span>
					<input type="text" name="univ" id="univ" class="form-control" placeholder="학교">
				</div>
				<div class="input-group">
					<span class="input-group-addon">학점</span>
					<input type="text" name="grade" class="form-control" placeholder="학점">
				</div>
				<div class="input-group">
					<div class="input-group-btn">
						<button type="button" id="lang1" name="lang1" class="btn btn-default dropdown-toggle" data-toggle="dropdown">어학성적<span class="caret"></span></button>
							<ul class="dropdown-menu">
								<% for(Language lang : langList) {%>
									<li><a href="#" onclick="selectLang(this, '<%=lang.getLangid()%>', lang1, langid1)"><%= lang.getLangName() %></a>
								<%} %>
							</ul>
					</div><!-- /btn-group -->
					<input type="hidden" name="langid1" id="langid1">
					<input type="text" name="langGrade1" class="form-control" placeholder="어학성적">
				</div>
				<div class="input-group">
					<div class="input-group-btn">
						<button type="button" id="lang2" name="lang2" class="btn btn-default dropdown-toggle" data-toggle="dropdown">어학성적<span class="caret"></span></button>
							<ul class="dropdown-menu">
								<% for(Language lang : langList) {%>
									<li><a href="#" onclick="selectLang(this, '<%=lang.getLangid()%>', lang2, langid2)"><%= lang.getLangName() %></a>
								<%} %>
							</ul>
					</div><!-- /btn-group -->
					<input type="hidden" name="langid2" id="langid2">
					<input type="text" name="langGrade2" class="form-control" placeholder="어학성적">
				</div>
				<div class="input-group">
					<div class="input-group-btn">
						<button type="button" id="lang3" name="lang3" class="btn btn-default dropdown-toggle" data-toggle="dropdown">어학성적<span class="caret"></span></button>
							<ul class="dropdown-menu">
								<% for(Language lang : langList) {%>
									<li><a href="#" onclick="selectLang(this, '<%=lang.getLangid()%>', lang3, langid3)"><%= lang.getLangName() %></a>
								<%} %>
							</ul>
					</div><!-- /btn-group -->
					<input type="hidden" name="langid3" id="langid3">
					<input type="text" name="langGrade3" class="form-control" placeholder="어학성적">
				</div>
				<p class="text-center">
					<button type="button" class="btn btn-default btn-lg" onclick="checkJoinInput()">회원가입하기</button><br>
				</p>
				<p id="message" class="text-center">
					* 표시된 부분은 필수 입력 항목이니 꼭 입력하여 주세요.
				</p>
			</div>
		</div>
	</form>
</body>
</html>